<template>
  <div>
    <i-button :buttonData="buttonData" @btnClick="dialogData.show=true"></i-button>
    <IDialog :dialogData="dialogData" @customCancel="customCancel" @customSbumit="customSbumit" @cancel="onCancel">
      <span>我是弹窗 slot添加弹窗内容</span>
    </IDialog>
    <lib-doc :libDocData="libDocData"></lib-doc>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IButton, IDialog } from 'wd-platform-library'
import { ButtonInterFace } from 'wd-platform-library/lib/src/IButton/src/ButtonInterFace'
import { DialogDataInterface } from 'wd-platform-library/lib/src/IDialog/src/IDialogInterFace'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { buttonObjState } from 'wd-platform-utils'
export default defineComponent({
    name: 'i_diaolg_demo',
    setup () {
        const dialogData = reactive<DialogDataInterface>({
            width: 800, // 弹框宽度
            buttonObject: {
                customCancel: {
                    label: '自定义取消',
                    buttonFun: 'customCancel',
                    options: {
                        type: 'default'
                    },
                    disabled: false,
                    isShow: true
                },
                customSbumit: {
                    label: '自定义确定',
                    buttonFun: '',
                    options: {
                        type: 'primary'
                    },
                    disabled: false,
                    loading: false,
                    isShow: true
                }
            },
            show: false, // 弹框是否展示
            title: '弹窗标题', // 弹框名字
            onSubmit: () => {
                dialogData.show = false
                dialogData.onCancel && dialogData.onCancel()
                alert('默认提交')
            },
            onCancel: () => {
                dialogData.show = false
                alert('默认取消')
            },
            cancel: () => {
                dialogData.buttonObject && buttonObjState(dialogData.buttonObject, false)
                dialogData.show = false
                alert('默认弹窗关闭执行')
            }
        })
        const customSbumit = () => {
            dialogData.buttonObject && buttonObjState(dialogData.buttonObject, true, 'customSbumit')
            onCancel()
            alert('自定义确定')
        }
        const customCancel = () => {
            dialogData.buttonObject && buttonObjState(dialogData.buttonObject, true, 'customCancel')
            alert('自定义取消')
            onCancel()
        }
        const onCancel = () => {
            dialogData.buttonObject && buttonObjState(dialogData.buttonObject, false)
            alert('自定义关闭执行')
            dialogData.show = false
        }
        const buttonData: ButtonInterFace = {
            loading: false,
            label: '弹窗',
            isShow: true,
            Fun: 'btnClick'
        }

        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { IDialog } from 'wd-platform-library'
        import { DialogDataInterface } from 'wd-platform-library/lib/src/IDialog/src/IDialogInterFace'
        <IDialog :dialogData="dialogData" @cancel="dialogCancel" @dialogSbumit="dialogSbumit" @dialogCancel="dialogCancel">
            <span>我是弹窗 slot添加弹窗内容</span>
        </IDialog>`
                },
                {
                    label: '创建弹出框对象',
                    type: 'pre',
                    value: `
        const dialogData = reactive<DialogDataInterface>({
            width: 800, // 弹框宽度
            buttonObject: {
                customCancel: {
                    label: '自定义取消',
                    buttonFun: 'customCancel',
                    options: {
                        type: 'default'
                    },
                    disabled: false,
                    isShow: true
                },
                customSbumit: {
                    label: '自定义确定',
                    buttonFun: '',
                    options: {
                        type: 'primary'
                    },
                    disabled: false,
                    loading: false,
                    isShow: true
                }
            },
            show: false, // 弹框是否展示
            title: '弹窗标题', // 弹框名字
            onSubmit: () => {
                dialogData.show = false
                dialogData.onCancel && dialogData.onCancel()
                alert('默认提交')
            },
            onCancel: () => {
                dialogData.show = false
                alert('默认取消')
            },
            cancel: () => {
                dialogData.buttonObject && DataFormate.buttonObjState(dialogData.buttonObject, false)
                dialogData.show = false
                alert('默认弹窗关闭执行')
            }
        })
       `
                },
                {
                    label: '默认确定/取消按钮',
                    type: 'pre',
                    value: `
    onSubmit: () => {  //默认确定按钮(不传递此方法则确定按钮不展示)
                dialogData.show = false
                alert('默认提交')
    },
    onCancel: () => {  //默认取消按钮(不传递此方法则取消按钮不展示)
                dialogData.show = false
                alert('默认取消')
    },
    cancel: () => { //默认关闭按钮  不传递此方法默认执行onCancel
                dialogData.show = false
                alert('默认弹窗关闭')
    }`
                },
                {
                    label: '自定义按钮集合',
                    type: 'pre',
                    value: `
    buttonObject: {
                customCancel: {
                    label: '自定义取消',
                    buttonFun: 'customCancel',
                    options: {
                        type: 'default'
                    },
                    disabled: false,
                    isShow: true
                },
                customSbumit: {
                    label: '自定义确定',
                    buttonFun: '',
                    options: {
                        type: 'primary'
                    },
                    disabled: false,
                    loading: false,
                    isShow: true
                }
            },
    //自定义确定回调
   const customSbumit = () => {
            dialogData.buttonObject && DataFormate.buttonObjState(dialogData.buttonObject, true, 'customSbumit')
            onCancel()
            alert('自定义确定')
        }
        const customCancel = () => {
            dialogData.buttonObject && DataFormate.buttonObjState(dialogData.buttonObject, true, 'customCancel')
            alert('自定义取消')
            onCancel()
        }
        const onCancel = () => {
            dialogData.buttonObject && DataFormate.buttonObjState(dialogData.buttonObject, false)
            alert('自定义关闭执行')
            dialogData.show = false
        }
    //@cancel 弹出框关闭后调
    <IDialog :dialogData="dialogData"  @customCancel="customCancel" @customSbumit="customSbumit"  @cancel="onCancel"></IDialog>`
                }
            ]
        }
        return {
            onCancel,
            libDocData,
            buttonData,
            customCancel,
            customSbumit,
            dialogData
        }
    },
    components: {
        IDialog,
        IButton,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
